import 'package:flutter/material.dart';
import 'package:flutter_eve_plugin/constants/font_family.dart';
import 'package:flutter_eve_plugin/constants/font_weight.dart';
import 'package:flutter_eve_plugin/store/main.dart';
import 'package:flutter_eve_plugin/store_vm/app_vm.dart';
import 'package:flutter_eve_plugin/utils/image_util.dart';
import 'package:flutter_eve_plugin/utils/screen_util.dart';
import 'package:flutter_redux/flutter_redux.dart';

class CheckpointPassRankTopWidget extends StatelessWidget {
  const CheckpointPassRankTopWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(converter: (store) {
      return AppStateViewModel(state: store.state);
    }, builder: (context, vm) {
      var stages = vm.state.yeXiuState.checkpointState.checkpointStages;
      return Stack(
        children: <Widget>[
          Container(
            width: setRatio(375),
            height: setRatio(135),
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage(
                        imageUtilYeXiu('checkpoint/icon_pass_rank_top@3x')),
                    fit: BoxFit.fill)),
          ),
          GestureDetector(
            onTap: () {
              if (Navigator.canPop(context)) {
                Navigator.pop(context);
              }
            },
            child: Image.asset(
              imageUtilYeXiu('checkpoint/icon_left_close@3x'),
              width: setRatio(65),
              height: setRatio(30),
              fit: BoxFit.fill,
            ),
          ),
          Positioned(
            bottom: setRatio(8),
            child: Container(
              width: setRatio(375),
              height: setRatio(24),
              decoration: BoxDecoration(color: Color(0x3F000000)),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Text(
                    '排名',
                    style: TextStyle(
                        decoration: TextDecoration.none,
                        fontFamily: FontFamily.PINGFANG,
                        fontWeight: FontWeightCustom.PF_Medium,
                        fontSize: setTextSp(11),
                        color: Color(0x9FFFFFFF)),
                  ),
                  Text(
                    '名称',
                    style: TextStyle(
                        decoration: TextDecoration.none,
                        fontFamily: FontFamily.PINGFANG,
                        fontWeight: FontWeightCustom.PF_Medium,
                        fontSize: setTextSp(11),
                        color: Color(0x9FFFFFFF)),
                  ),
                  Text(
                    '等级',
                    style: TextStyle(
                        decoration: TextDecoration.none,
                        fontFamily: FontFamily.PINGFANG,
                        fontWeight: FontWeightCustom.PF_Medium,
                        fontSize: setTextSp(11),
                        color: Color(0x9FFFFFFF)),
                  ),
                  Text(
                    '总得分',
                    style: TextStyle(
                        decoration: TextDecoration.none,
                        fontFamily: FontFamily.PINGFANG,
                        fontWeight: FontWeightCustom.PF_Medium,
                        fontSize: setTextSp(11),
                        color: Color(0x9FFFFFFF)),
                  )
                ],
              ),
            ),
          ),
          Positioned(
            bottom: setRatio(81),
            right: setRatio(20),
            child: Text(
              '通关排名',
              style: TextStyle(
                  letterSpacing: 1,
                  decoration: TextDecoration.none,
                  fontStyle: FontStyle.italic,
                  color: Color(0xFFFFFFFF),
                  fontFamily: FontFamily.PINGFANG,
                  fontWeight: FontWeightCustom.PF_Medium,
                  fontSize: setTextSp(15)),
            ),
          ),
          Positioned(
            bottom: setRatio(50),
            right: setRatio(20),
            child: Text(
              stages?.dungeonName ?? '',
              style: TextStyle(
                  letterSpacing: 2,
                  decoration: TextDecoration.none,
                  fontStyle: FontStyle.italic,
                  color: Color(0xFFFFFFFF),
                  fontFamily: FontFamily.PMZD,
                  fontSize: setTextSp(30)),
            ),
          ),
        ],
      );
    });
  }
}
